import { useState } from "react"
import { useDispatch } from 'react-redux'
import { useHistory } from "react-router-dom"
import { CONFIRM_INVOICE } from 'src/redux/action-type'
import { Header } from 'src/components'
import classNames from "classnames"
import './index.scss'

const Invoice = () => {
    const history = useHistory()
    const dispatch = useDispatch()
    const [invoice, setinvoice] = useState(false)
    //是否选择发票
    const chooseInvoice = () => {
        setinvoice(!invoice)
    }
    //保存发票信息
    const confrimInvoice = () => {
        dispatch({
            type: CONFIRM_INVOICE,
            invoice
        })
        history.go(-1);
    }
    return <div className="page_confirmorder_invoice">
        <Header title="选择发票抬头" goBack></Header>
        <section className="choose_invoice">
            <span>不需要开发票</span>
            <svg onclick={chooseInvoice} className={classNames({ 'choosed': invoice })}>
                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
            </svg>
        </section>
        <div className="determine" onclick={confrimInvoice}>确定</div>
    </div>
}

export default Invoice

